export const layout = {
  "header-height": "42px",
  "tabs-height": "36px",
  "footer-height": "42px",
  "sider-width": "64px",
  "content-padding": "16px",
};

function getBlockScssVars(block: Record<string, string>, blockName: string) {
  return Object.entries(block).reduce(
    (acc, cur) => acc + `$z-${blockName}__${cur[0]}: ${cur[1]};\n`,
    ""
  );
}

export const variables = { layout };

export function getScssVars() {
  return Object.entries(variables)
    .map(([key, value]) => getBlockScssVars(value, key))
    .join("\n");
}
